<template>
    <div style="height: 100%" class="warp-2 body-content">
        <navbar :title="$t('circle_kg_19')">
            <template #left>
                <div class="icon-back-layer" v-if="isCheckbox" @click.stop="cancelOperation"></div>
            </template>
            <template #right>
                <div v-if="isCheckbox" class="add-btn">
                    <a :class="selectList.length > 0 ? 'add-ok' : 'add-no'" @click.stop="deleteFor">{{ $t('circle_photo_11') }}</a>
                    <a :class="selectList.length > 0 ? 'add-ok' : 'add-no'" @click.stop="openMove">{{ $t('circle_photo_12') }}</a>
                </div>
                <a class="header-icon-more" @click="moreShow = true" v-else>
                    <ul class="word-btn-list" v-if="moreShow">
                        <li @click="toUpload(null)">{{ $t('circle_kg_20') }}</li>
                        <li v-if="active === 0 && (isMan || isKgMan)" @click="() => {dirBox = true;$nextTick(() => {moreShow = false;})}">{{ $t('circle_kg_21') }}</li>
                        <li v-if="active !== 2 && (isMan || isKgMan)" @click="() => {isCheckbox = true;$nextTick(() => {moreShow = false;})}">{{ $t('circle_kg_22') }}</li>
                    </ul>
                </a>
            </template>
        </navbar>
        <div class="content-noBottom">
            <div>
                <van-tabs v-model="active" color="#075ebb" title-active-color="#075ebb" @click="selectType">
                    <van-tab :title="$t('circle_kg_23')"></van-tab>
                    <van-tab :title="$t('circle_kg_24')"></van-tab>
                    <van-tab :title="$t('circle_kg_25')"></van-tab>
                </van-tabs>
            </div>
            <div style="height: calc(100vh - 130px);" :class="{'height-100' : total === 0}">
                <div class="list-sort">
                    <div @click="topData" class="no-show-top-btn" :class="{'show-top-btn' : !isLoading && isNextData}">{{ $t('circle_kg_26') }}</div>
                    <div @click="sortHandle"><span>{{ $t('circle_kg_27') }}</span><van-icon name="exchange" class="sort-icon"/></div>
                </div>
                <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                    <van-list
                    v-model="isLoading"
                    :finished="finished"
                    :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                    loding-text="loading"
                    @load="getKnowledgeDataListByWctId"
                    style="padding-bottom: 56px;"
                    >
                        <div v-bind:class="{'height100' : total === 0}">
                            <van-checkbox-group v-model="selectList" class="file-list" v-if="list.length > 0">
                                <van-swipe-cell v-for="item in list" :key="item.ttId">
                                    <div class="file-item" @click="nextData(item)">
                                        <div class="file-checkbox" v-show="isCheckbox">
                                            <van-checkbox class="file-checkbox" :name="item.ttId" @click.stop></van-checkbox>
                                        </div>
                                        <div class="file-info">
                                            <div class="file-title">
                                                <span class="file-icon">
                                                    <van-image fit="cover" width="16px" height="16px" :src="item.sourceType | getIcon"/>
                                                </span>
                                                <span>{{ item.ttName }}</span>
                                            </div>
                                            <div><span>{{ item.ttUpdateDatetime || item.ttCreateDatetime}}</span><span>{{ item.authorName }}</span></div>
                                        </div>
                                        <div class="file-next" v-if="item.sourceType === 'CATALOG' && active !== 2">
                                            <van-icon name="arrow" />
                                        </div>
                                    </div>
                                    <template slot="right" v-if="item.editable && active !== 2">
                                        <van-button square type="info" :text="$t('circle_kg_28')" class="handle-btn" @click="() => {ttData.ttName = item.ttName;ttData.ttId = item.ttId;dirBox = true;$nextTick(() => {moreShow = false;})}"/>
                                        <van-button square type="info" v-if="item.sourceType !== 'CATALOG'" :text="$t('circle_kg_4')" class="handle-btn" @click="toUpload(item.ttKbiId)"/>
                                        <van-button square type="danger" :text="$t('circle_kg_5')" @click="deleteNodeById(item.ttId, false)" class="handle-btn"/>
                                    </template>
                                    <template slot="right" v-if="active === 2 && item.editable">
                                        <van-button square type="info" :text="$t('circle_kg_29')" class="handle-btn" @click="restore(item.ttId)"/>
                                        <van-button square type="danger" :text="$t('circle_kg_30')" @click="deleteNodeById(item.ttId, true)" class="handle-btn"/>
                                    </template>
                                </van-swipe-cell>
                            </van-checkbox-group>
                            <div v-if="!isLoading && total === 0" style="height:100%;">
                                <div class="box-table" style="width:100%;height:100%;">
                                    <div class="box-table-cell" style="text-align: center;">
                                        <div class="no-data">
                                            <img src="../../../../static/images/no-data.png" alt=""/>
                                            <p class="color999">{{ $t("no_data") }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
        <select-catalog :default-checked.sync="selectCatalogId" :show-box.sync="isShowMove" :wct-id="this.kgData.wctId.toString()" @result="moveFor"></select-catalog>
        <div class="mask-white" v-if="moreShow" @click="moreShow = false"></div>
        <van-overlay :show="dirBox" @click="dirBox = false">
            <div class="dir-box" @click.stop>
                <van-field v-model="ttData.ttName" :placeholder="$t('circle_kg_59')" maxlength="10" show-word-limit/>
                <div class="box-btn">
                    <div @click="$nextTick(() => {dirBox = false;ttData = {ttName:  ''}})">{{ $t('circle_kg_13') }}</div>
                    <div @click="createOrUpdateDir">{{ $t('circle_kg_14') }}</div>
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import { Toast, Image, Dialog, Checkbox, CheckboxGroup, ActionSheet, Tab, Tabs, SwipeCell, Button, Icon, Overlay, Field } from 'vant';
import SelectCatalog from './SelectCatalog';
import dir from '../../../../static/images/dir.png';
import txt from '../../../../static/images/txt.png';
import xls from '../../../../static/images/excel.png';
import doc from '../../../../static/images/word.png';
import article from '../../../../static/images/article.png';
import ppt from '../../../../static/images/ppt.png';
import brain from '../../../../static/images/brain.png';
import {cwnEncrypt, cwnDecrypt} from '@/utils/tools';
export default {
    name: 'KnowledgeDetail',
    components: {
        SelectCatalog,
        vatToast: Toast,
        vanImage: Image,
        vanDialog: Dialog,
        vanCheckbox: Checkbox,
        vanCheckboxGroup: CheckboxGroup,
        vanActionSheet: ActionSheet,
        vanTab: Tab,
        vanTabs: Tabs,
        vanSwipeCell: SwipeCell,
        vanButton: Button,
        vanIcon: Icon,
        vanOverlay: Overlay,
        vanField: Field
    },
    filters: {
        getIcon(type) {
            switch (type) {
            case 'CATALOG':
                return dir;
            case 'TXT':
                return txt;
            case 'XLS':
                return xls;
            case 'DOC':
                return doc;
            case 'ARTICLE':
                return article;
            case 'PPT':
            case 'PDF':
                return ppt;
            case 'BRAIN':
                return brain;
            default:
                return article;
            }
        }
    },
    data() {
        return {
            active: -1,
            kgData: {
                wctId: -1,
                wctWcId: -1,
                ttParentId: 0
            },
            total: 0,
            isTop: false,
            pageNo: 0,
            list: [],
            isLoading: false,
            moreShow: false,
            selectList: [],
            isCheckbox: false,
            isShowMove: false,
            selectCatalogId: -1,
            dirBox: false,
            ttData: {
                ttName: ''
            },
            currentId: -1,
            isNextData: false,
            topDataIndex: -1,
            currentTopDataId: [],
            sortOrder: 'DESC',
            // isMan: this.$store.state.circle.circleRole === 'GZLEADER' || this.$store.state.circle.circleRole === 'MANAGER',
            isMan: this.$store.state.circle.circleRole === 'GZLEADER',
            isKgMan: false,
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        ...{ cwnEncrypt, cwnDecrypt },
        restore(id) {
            this.$axios.put(`/app/api/trainee/work-circle/team/treenode/restore/${id}`).then(res => {
                Toast({message: this.$t('circle_kg_74'), forbidClick: true});
                this.isLoading = true;
                this.list = [];
                this.onPulldownTop();
            }).catch(res => {
                Toast({message: res.response.data.errMsg, forbidClick: true});
            });
        },
        sortHandle() {
            if (this.sortOrder === 'DESC') {
                this.sortOrder = 'ASC';
            } else {
                this.sortOrder = 'DESC';
            }
            this.isLoading = true;
            this.onPulldownTop();
        },
        selectType() {
            this.list = [];
            this.currentTopDataId = [];
            this.topDataIndex = -1;
            this.isNextData = false;
            this.currentId = this.kgData.wctId;
            this.isLoading = true;
            this.onPulldownTop();
        },
        moveFor(kbiId) {
            if (this.selectList.length > 0) {
                this.selectCatalogId = kbiId;
                Dialog.confirm({
                    message: this.$t('circle_kg_31', {'value': this.selectList.length})
                }).then(() => {
                    let data = {
                        targetId: this.selectCatalogId,
                        idList: this.selectList
                    };
                    this.$axios.put(`/app/api/trainee/work-circle/team/treenode/batch/mv/${this.kgData.wctId}`, data).then(res => {
                        Toast({message: this.$t('circle_kg_32'), forbidClick: true});
                        this.list = [];
                        this.selectList = [];
                        this.isLoading = true;
                        this.isCheckbox = false;
                        this.onPulldownTop();
                    }).catch(res => {
                        Toast({message: this.$t('circle_kg_33'), forbidClick: true});
                    });
                });
            } else {
                this.$toast('请选择要移动的文件');
            }
        },
        deleteFor() {
            if (this.selectList.length > 0) {
                Dialog.confirm({
                    message: this.$t('circle_kg_34', {'value': this.selectList.length})
                }).then(() => {
                    this.$axios.put(`/app/api/trainee/work-circle/team/treenode/batch/${this.kgData.wctId}`, this.selectList).then(res => {
                        Toast({message: this.$t('circle_kg_7'), forbidClick: true});
                        this.list = [];
                        this.selectList = [];
                        this.isLoading = true;
                        this.isCheckbox = false;
                        this.onPulldownTop();
                    });
                });
            } else {
                this.$toast('请选择要删除的文件');
            }
        },
        deleteNodeById(ttId, isDelete) {
            let url = `/app/api/trainee/work-circle/team/treenode/${ttId}`;
            if (isDelete) {
                url = `/app/api/trainee/work-circle/team/treenode/mark/${ttId}`;
            }
            Dialog.confirm({
                message: this.$t('circle_kg_6')
            }).then(() => {
                this.$axios.put(url).then(res => {
                    Toast({message: this.$t('circle_kg_7'), forbidClick: true});
                    this.list = [];
                    this.selectList = [];
                    this.isLoading = true;
                    this.onPulldownTop();
                });
            });
        },
        topData() {
            if (this.currentTopDataId[this.topDataIndex] === this.kgData.ttParentId) {
                this.isNextData = false;
                this.currentId = this.kgData.wctId;
                this.topDataIndex = -1;
                this.currentTopDataId = [];
            } else {
                this.currentId = this.currentTopDataId[this.topDataIndex];
                this.topDataIndex--;
            }
            this.isLoading = true;
            this.list = [];
            this.pageNo = 1;
            this.getKnowledgeDataListByWctId('refresh');
        },
        nextData(data) {
            if (this.active === 2) {
                return;
            }
            if (this.isCheckbox) {
                let index = this.selectList.indexOf(data.ttId);
                if (index > -1) {
                    this.selectList.splice(index, 1);
                } else {
                    this.selectList.push(data.ttId);
                }
            } else {
                if (data.sourceType === 'CATALOG') {
                    this.currentTopDataId.push(data.ttParentId);
                    this.topDataIndex++;
                    this.isNextData = true;
                    this.list = [];
                    this.pageNo = 1;
                    this.currentId = data.ttId;
                    this.isLoading = true;
                    this.getKnowledgeDataListByWctId('refresh');
                } else {
                    if (data.addressable) {
                        this.$router.push({path: `/circle/knowledge/knowledgeInfo/${this.cwnEncrypt(data.ttKbiId)}/${data.sourceType}`});
                    } else {
                        Toast({message: this.$t('circle_kg_35'), forbidClick: true});
                    }
                }
            }
        },
        createOrUpdateDir() {
            let requestType = 'POST';
            let data = this.ttData;
            if (this.ttData && this.ttData.ttId) {
                requestType = 'PUT';
            }
            data.ttParentId = this.isNextData ? this.currentId : this.kgData.ttParentId;
            data.ttWctId = this.kgData.wctId;
            this.$axios({
                method: requestType,
                url: '/app/api/trainee/work-circle/team/treenode',
                data: this.ttData
            }).then(res => {
                Toast({message: this.ttData.ttId ? this.$t('circle_kg_36') : this.$t('circle_kg_37'), forbidClick: true});
                this.$nextTick(() => {
                    this.dirBox = false;
                });
                this.ttData = {ttName: ''};
                this.isLoading = true;
                this.list = [];
                this.onPulldownTop();
            }).catch(res => {
                // Toast({message: this.$t('circle_kg_38'), forbidClick: true});
                Toast({message: res.response.data.errMsg, forbidClick: true});
            });
        },
        toUpload(ttKbiId) {
            let data = {
                wcId: typeof this.kgData.wctWcId === 'string' ? this.kgData.wctWcId : this.cwnEncrypt(this.kgData.wctWcId),
                wctId: this.cwnEncrypt(this.kgData.wctId),
                workCircleFolderId: this.kgData.ttId ? this.cwnEncrypt(this.kgData.ttId) : ''
            };
            if (ttKbiId) {
                data.ttKbiId = this.cwnEncrypt(ttKbiId);
            }
            this.$router.push({path: '/circle/knowledge/uploadFile', query: data});
        },
        getKnowledgeDataListByWctId(option) {
            let url;
            if (this.active === 1) {
                url = `/app/api/trainee/work-circle/team/treenode/my-doc/${this.currentId}`;
            } else if (this.active === 2) {
                url = `/app/api/trainee/work-circle/team/treenode/recovered/${this.currentId}`;
            } else {
                if (this.isNextData) {
                    url = `/app/api/trainee/work-circle/team/treenode/${this.currentId}`;
                } else {
                    url = `/app/api/trainee/work-circle/team/treenode/top/${this.currentId}`;
                }
            }
            let params = {
                pageNo: this.pageNo,
                sortname: 'ttCreateDatetime',
                sortorder: this.sortOrder
            };
            this.$axios.get(url, {
                params: params
            }).then(res => {
                if (res.data.results && res.data.results.length !== 0) {
                    if (option && option === 'refresh') {
                        this.list = res.data.results;
                    } else {
                        this.list = [...this.list, ...res.data.results];
                    }
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.list.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getKnowledgeDataListByWctId('refresh');
                this.isRefresh = false;
            }, 900);
        },
        getKnowledgeInfoDetail() {
            this.$axios.get(`/app/api/trainee/work-circle/team/${this.kgData.wctId}`).then(res => {
                if (res && res.data) {
                    this.isKgMan = res.data.role === 'T_MANAGER' || res.data.role === 'GZLEADER';
                }
            });
        },
        cancelOperation(event) {
            this.isCheckbox = false;
            this.selectList = [];
        },
        openMove() {
            if (this.selectList.length > 0) {
                this.isShowMove = true;
            } else {
                this.$toast('请选择要删除的文件');
            }
        }
    },
    created() {
        this.kgData = this.$route.query;
        this.kgData.ttParentId = 0;
        this.kgData.wctId = this.cwnDecrypt(this.kgData.wctId);
        this.currentId = this.kgData.wctId;
        this.isLoading = true;
        this.onPulldownTop();
        this.getKnowledgeInfoDetail();
        // this.getPhotoListByWcId();
    }
};
</script>

<style scoped lang="less">
    /deep/.van-overlay {
        z-index: 999;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /deep/.van-cell {
        border-radius: 10px;
    }
    .no-show-top-btn {
        visibility: hidden;
    }
    .show-top-btn {
        visibility: visible;
    }
    .dir-box {
        width: 70%;
        background: #fff;
        border-radius: 10px;
        .box-btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            &>div {
                width: 50%;
                font-size: 16px;
                text-align: center;
                padding: 10px 0;
            }
            &>div {
                color: #c7c7cc;
            }
            &>div:last-child {
                color: red;
            }
        }
    }
    .list-sort {
        font-size: 14px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #075ebb;
        &>div:first-child {
            margin-left: 10px;
        }
        &>div:last-child {
            margin-right: 10px;
            align-items: center;
            justify-content: space-between;
            &>span {
                font-size: 14px;
                margin-right: 5px;
            }
            .sort-icon {
                transform: rotate(90deg);

            }
        }
    }
    .file-list {
        background: #fff;
        .file-item {
            display: flex;
            height: 60px;
            padding: 10px 15px;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px #F6F6F6 solid;
            .file-checkbox {
                width: 50px;
            }
            .file-info {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 100%;
                flex-grow: 1;
                .file-title {
                    display: flex;
                    align-items: center;
                    padding-top: 6px;
                    .file-icon {
                        height: 16px;
                        width: 16px;
                        margin-right: 15px;
                    }
                }
                &>div:last-child {
                    padding-bottom: 6px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
            }
            .file-next {
                width: 50px;
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                color: #c7c7cc;
                font-size: 20px;
            }
        }
    }
    .overwrite-title {
        display: flex;
        align-content: center;
        justify-content: center;
        height: 55px;
        line-height: 55px;
        font-size: 18px;
        color: #333;
    }
    .word-btn-list {
        width: 80px;
        padding: 2px 15px;
        background: #ffffff;
        border-radius: 2px;
        position: absolute;
        top: 15px;
        right: 10px;
        z-index: 100;
        box-shadow: 0 1px 2px #cccccc;
        text-align: center;
        li {
            // padding: 15px 0;
            border-bottom: 1px solid #e6e6e6;
            font-size: 14px;
            color: #1a1a1a;
            &:nth-last-child(1) {
                border-bottom: 0;
            }
        }
    }
    .mask-white {
        width: 100%;
        height: 100%;
        background: transparent;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .header-icon-more {
        position: relative;
    }
    .add-btn {
        height: 55px;
        line-height: 55px;
        padding: 0 15px;
        font-size: 16px;
    }
    .add-ok {
        color: #1a1a1a !important;
    }
    .add-no {
        color: #ccc;
    }
    /deep/.van-dialog__message {
        overflow-y: hidden;
    }
    .handle-btn {
        height: 100%;
    }
</style>
